<template>
	<view class="ikz-school">
    <ikz-loading  :css-data="loading_css"></ikz-loading>
    <view class="ikz-address ikz-after">
      <image class="ikz-address-icon" src="/static/getorder/address.png" />
      <view class="ikz-address-box">
        <view class="ikz-address-title">
          {{address_default.name}}  {{address_default.mobile}}
        </view>
        <view class="ikz-address-tips">
          {{address_default.group_name}} {{address_default.detail}}
        </view>
      </view>
    </view>
    <view class="ikz-address ikz-after">
      <image class="ikz-address-icon" style="width: 40rpx;" src="/static/getorder/time.png" />
      <view class="ikz-address-box">
        {{form_data.hope_arrive}} 送达
      </view>
    </view>
    <view class="ikz-tips">
      <view class="ikz-tips-item">
        <view class="ikz-tips-help">
          <view class="ikz-tips-help-title">
            帮助内容
          </view>
          <view class="ikz-tips-help-content">
            {{form_data.information}}
          </view>
        </view>
      </view>
      <view class="ikz-tips-item">
        <view class="ikz-tips-price-title">
          价格
        </view>
        <view class="ikz-tips-price">
          ￥{{ form_data.run_fee }}
        </view>
      </view>
      <view class="ikz-tips-item ikz-afters">
        <view class="ikz-tips-price-title">
          赏金
        </view>
        <view class="ikz-tips-price" style="margin-right: 20px;" @click="showRaward">
          {{form_data.reward?'￥':''}}{{ form_data.reward||'选择赏金' }}
        </view>
      </view>
    </view>
    <!-- 取快递 -->
    
    <view style="height:230rpx">
    </view>
    <view class="ikz-bottom">
      <view class="ikz-bottom-box">
        <view class="ikz-bottom-price">￥{{ form_data.total_fee }}</view>
        <view class="ikz-bottom-btn" @click="submitForm">立即支付</view>
      </view>
    </view>
    <view class="ikz-reward" v-show="reward_status">
      <view class="ikz-reward-box">
        <view class="ikz-reward-title">
          选择赏金
        </view>
        <view class="ikz-reward-item">
          <view class="ikz-reward-price"  v-for="(item,index) in money_reward.list" :key="index" @click="selectRaward(index)" :style="reward_index == index?'color:#F8C66D;border-color:#F8C66D' : ''">
            ￥{{item.value}}
          </view>
        </view>
        <view class="ikz-reward-input">
          <view class="ikz-reward-input-box" @click="selectRaward(-1)" :style="reward_index == -1?'border-color:#F8C66D' : ''">
            <input  @input="rewardPrice"   v-model="reward_input"  class="ikz-reward-inputs" placeholder="请输入赏金金额" />
          </view>
        </view>
        <view class="ikz-reward-tips">
          注：赏金最小金额{{ money_reward.min_run_fee }}元，最大金额{{ money_reward.max_run_fee }}元，赏金支付不退
        </view>
        <view class="ikz-reward-bottom">
          <view class="ikz-reward-cancel" @click="rewardFalse">
            取消选择
          </view>
          <view class="ikz-reward-confirm" @click="rewardSubmit">
            确认选择
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
  import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
  import ikzTopbg from '@/pages/Component/Public/Topbg/public/topbg/topbg.vue';
  import ikzUpdata from '@/pages/Component/Public/Updata/public/updata/updata.vue';
  var app = getApp();
  import ikz from '@/pages/Common/tools.js';
  export default {
    components: {
      ikzLoading,
      ikzTopbg,
      ikzUpdata
    },
    data() {
      return {
        loading_css:{
          display:'flex',
        },
        reward_status:false,
        form_data:{},
        address_default:{},
        money_reward:{},
        reward_index:'999',
        reward_input:''
       }
    },
    onLoad(options){
      this.form_data = options;
      this.address_default = app.globalData.user_address.address_default;
      this.money_reward = app.globalData.money_reward;
      
      this.loading_css.display = 'none';
      console.log(options);
      this.totalPrice()
    },
    created() {
      // var that = this;
    },
    methods: {
      //取消选择
      rewardFalse(){
        this.reward_index = '999';
        this.form_data.reward = '';
        this.reward_input = '';
        this.$forceUpdate();
        this.totalPrice();
        this.reward_status = false;
      },
      //赏金确认选择
      rewardSubmit(){
        if(this.reward_index == '999'){
          wx.showToast({
          	title: '请选择或输入赏金',
          	icon: 'error',
          	duration: 2000
          })
          return
        }
        if(this.reward_index == -1){
          if(parseFloat(this.reward_input) >= parseFloat(this.money_reward.min_run_fee) && parseFloat(this.reward_input) <= parseFloat(this.money_reward.max_run_fee)){
            this.form_data.reward = this.reward_input;
            this.totalPrice();
            this.reward_status = false;
          }else{
            wx.showToast({
            	title: '请输入正确金额赏金',
            	icon: 'error',
            	duration: 2000
            })
            return
          }
        }else{
          this.form_data.reward = this.money_reward.list[this.reward_index].value;
          this.totalPrice();
          this.reward_status = false;
        }
      },
      //记录输入的赏金
      rewardPrice(e){
        //正则表达试
        e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
        //重新赋值给input
        this.$nextTick(() => {
          this.reward_input= e.target.value
        })
      },
      //计算总价
      totalPrice(){
        this.form_data.total_fee = (parseFloat(this.form_data.run_fee) + parseFloat(this.form_data.reward||0)).toFixed(2);
      },
      //弹出赏金
      showRaward(){
        this.reward_status = true
      },
      //选择赏金
      selectRaward(index){
        this.reward_index = index;
      },
      
      //不同意
      cancelTreaty(){
        //退出程序
        // plus.runtime.quit();
      },
      
      //请求页面数据
      submitForm() {
        var path = '/xyb/order/create';
        var data = this.form_data;
        ikz.post(path, data, res => {
          if (res.data.code) {
            uni.navigateTo({
              url:'/pages/Component/Module/Payment/Program/pay/index/index?orderid='+res.data.data.id+'&total_price='+this.form_data.total_fee
            })
          } else {
            uni.showModal({
              title: '提示',
              content: res.data.msg,
              showCancel: false,
              success: function(res) {}
            });
          }
          // if(that.pull_status){
          // 	this.$emit("change",'pull');
          // }
        });
      },

    }
  };
</script>

<style >
  page{
    width: 100%;
    height: 100%;
    background:#F3F3F3;
  }
  .ikz-afters{
    position: relative;
  }
  .ikz-afters:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #888;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
    top: -2px;
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 10px;
  }
  .ikz-address{
    box-sizing: border-box;
    padding: 10rpx 40rpx;
    width: 95%;
    height: 150rpx;
    background: #fff;
    margin: 10px auto;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    
  }
  .ikz-address-icon{
    width: 35rpx;
    height: 40rpx;
  }
  .ikz-address-box{
    margin-left: 20rpx;
  }
  .ikz-address-title{
    font-size: 28rpx;
  }
  .ikz-address-tips{
    font-size: 25rpx;
    color: #828282;
  }
  .ikz-tips{
    box-sizing: border-box;
    padding: 10rpx 40rpx;
    width: 95%;
    background: #fff;
    margin: 10px auto;
    border-radius: 15rpx;
  }
  .ikz-tips-item{
    padding: 20rpx 0px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ikz-tips-item:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1rpx solid #d9d9d9;
    color: #d9d9d9;
    left: 0px;
  }
  
  .ikz-tips-item:first-child:before {
    display: none;
  }
  
  .ikz-tips-help-title{
    line-height: 60rpx;
  }
  .ikz-tips-help-content{
    line-height: 50rpx;
    color: #828282;
  }
  .ikz-tips-price{
    color: #828282;
  }
  /* 其他 */
  /* 底部 */
  .ikz-bottom{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 150rpx;
    background: #F3F3F3;
  }
  .ikz-bottom-box{
    width: 95%;
    height: 100rpx;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #555555;
    border-bottom-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
  }
  .ikz-bottom-price{
    margin-left:50rpx;
    color: #fff;
    font-weight: 800;
    
  }
  .ikz-bottom-btn{
    box-sizing: border-box;
    padding:0px 40rpx;
    height: 100rpx;
    line-height: 100rpx;
    color: #fff;
    border-bottom-left-radius: 60rpx;
    border-top-right-radius: 60rpx;
    background: linear-gradient(to right, #FBAB7E, #F8C66D);
  }
  /* 底部 */
  /* 弹窗 */
  .ikz-reward{
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: rgba(000,000,000,0.3);
  }
  .ikz-reward-box{
    width:90%;
    margin:0 auto;
    border-radius: 15rpx;
    background: #fff;
  }
  .ikz-reward-title{
    width: 100%;
    text-align: center;
    line-height: 150rpx;
  }
  .ikz-reward-item{
    box-sizing: border-box;
    padding: 20rpx 20rpx 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .ikz-reward-price{
    width: 28%;
    border-radius: 15rpx;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
    border: 1px solid #888888;
    margin-bottom:50rpx;
  }
  .ikz-reward-input{
    box-sizing: border-box;
    padding:0px 20rpx;
    width: 100%;
  }
  .ikz-reward-input-box{
    box-sizing: border-box;
    padding: 20rpx;
    height: 80rpx;
    border: 1px solid #888888;
    border-radius: 15rpx;
    display: flex;
    align-items: center;
  }
  .ikz-reward-inputs{
    width: 100%;
  }
  .ikz-reward-tips{
    width: 100%;
    text-align: center;
    font-size: 25rpx;
    color: #DD524D;
    line-height: 50rpx;
    margin-top: 30rpx;
  }
  .ikz-reward-bottom{
    width: 90%;
    height: 100rpx;
    margin: 0px auto 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .ikz-reward-cancel{
    width: 300rpx;
    text-align: center;
    color: #888;
    border: 1px solid #888;
    border-radius: 50rpx;
    font-size:28rpx;
    line-height: 80rpx;
    margin-right: 20rpx;
  }
  .ikz-reward-confirm{
    width: 300rpx;
    text-align: center;
    color: #fff;
    border-radius: 50rpx;
    font-size:28rpx;
    line-height: 80rpx;
    background: #F8C66D;
    border: 1px solid #F8C66D;
  }
  /* 弹窗 */
</style>
